<template>
  <!-- 重要事项提醒 -->
  <div class='warn'>
    <div class="top">
      <h4>重要事项提醒</h4>

    </div>
    <div class="content">
      <ul v-for="(item, index) in 6" :key="index" class="uu df">
        <div style="width: 60%;">
          <li style="color: red;font-weight: 700;">财务部</li>
          <li> <span class="a">事项内容 :</span> <span class="cu">销售部日报汇总查看冰反馈</span></li>
          <li><span class="a">创建时间 :</span> 2022-22-52</li>
          <li><span class="a">需完成时间 :</span> 2022-10-20</li>
        </div>
        <div style="width: 40%;" class="d-center">
          <el-button type="primary">查看</el-button>
        </div>
      </ul>

    </div>




  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {

    }
  },
  created() { },
  mounted() { },
  methods: {}
}
</script>
<style scoped lang='scss'>
.top {
  height: 150px;

  h4 {
    font-weight: 600;
  }
}

.content {
  overflow: scroll;
  height: calc(100% - 60px);
  width: 100%;

  .uu {
    background-color: #fff;
    box-shadow: 0 0 10px 0 #ccc;
    padding: 15px 20px;

    li {
      color: #C2C2C2;
      padding: 5px 0;

      .a {
        display: inline-block;
        width: 120px;
        text-align: right;

      }
    }

    .cu {
      color: #000;
      font-weight: 600;
    }
  }

}

.warn {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 120px);
  overflow: hidden;
}


// ::v-deep .main {
//   // height: calc(100% - 70px);
// }
</style>
